<!DOCTYPE html>

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- Use Compatibility mode in IE -->
  <title>Usage Summary Report</title>
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
  
  <link rel="stylesheet" type="text/css" href="/media/jquery-ui/css/jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="/media/jquery-ui/css/examples.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="/media/js/jqGrid/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/media/js/jqGrid/themes/jqModal.css" />
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jquery-1.4.4.js"></script>
  <!-- END: load jquery -->
  
  <!-- BEGIN: load jqplot -->
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/excanvas.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jquery-1.3.2.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jquery.jqplot.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jqplot.categoryAxisRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jqplot.barRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jqplot.dragable.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jqplot.highlighter.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jqplot.dateAxisRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jqplot.canvasTextRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jqplot.canvasAxisTickRenderer.min.js"></script>
	<script language="javascript" type="text/javascript" src="/media/jquery-ui/js/jqplot.canvasAxisTickRenderer.min.js"></script>
  <!-- END: load jqplot -->

  <style type="text/css">
    .jqplot-target {
        margin-bottom: 2em;
    }
    
    pre {
        background: #D8F4DC;
        border: 1px solid rgb(200, 200, 200);
        padding-top: 1em;
        padding-left: 3em;
        padding-bottom: 1em;
        margin-top: 1em;
        margin-bottom: 4em;
        
    }
    
    p {
        margin: 2em 0;
    }
    
    .note {
        font-size: 0.8em;
    }
  </style>


<script type="text/javascript">
	var xAxis;
	
	$.post("/agenda/xhr_test/", { 
        name: "Monty", 
        food: "Spam" 
    },
    function(data) {
    	var object = eval(data);
    	var arrCountry = Array();
    	var arrAttempts = Array();
    	var arrCompleted = Array();
    	var arrASR = Array();
    	var arrACD = Array();
    	var arrRawDur = Array();
    	for (var i = 0; i < object.length; i++) 
    	{
    		//alert(object[i].fields.ASR);
    		arrCountry[i] = object[i].fields.Country;
    		arrAttempts[i] = object[i].fields.Attempts;
    		arrCompleted[i] = object[i].fields.Completed;
    		arrASR[i] = object[i].fields.ASR;
    		arrACD[i] = object[i].fields.ACD;
    		arrRawDur[i] = object[i].fields.RawDur;
    	}
        //alert(data);
        //var pageHits = [30,60,22,5,60,88,102];
		//var rssHits = [33,45,121,23,55,35,77];
		//var xAxis = ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'];
        xAxis = arrCountry;
        $.jqplot('chartDiv2', [arrAttempts, arrCompleted, arrASR, arrACD, arrRawDur], CreateBarChartOptions());
 
    })

	function CreateBarChartOptions()
		{
			var optionsObj = {
				title: 'Report Summary Graph',
				axes: {
					 xaxis: {
			            renderer: $.jqplot.CategoryAxisRenderer,
			            ticks: xAxis
			        }
				},
				series: [{label:'Attempts'}, {label: 'Completed'},
						{label: 'ASR'}, {label: 'ACD'},
						{label: 'RawDur'}],
				legend: {
					show: true,
					location: 'nw'
				},
				seriesDefaults:{
					shadow: true,
					renderer:$.jqplot.BarRenderer,
					rendererOptions:{
		 	           barPadding: 0,
			           barMargin: 5
			       }
				},
				highlighter: {
					showTooltip: true,
					tooltipFade: true
				}
			};
			return optionsObj;
		}
;

</script>
  </head>
  <body>
<div id="top" style="font-size:1.5em;color: #335533;font-size: 1.5em;margin: 0 0 0.5em;"><h2>Graph Page</h2></div>
	<div id="navi" style="border-bottom: 2px solid #000;">
	<a href="{% url upload %}">home</a> - <a href="{% url report %}">Report</a> - <a href="{% url graph %}">Graph</a>
	</div>
	<br />
	<div id="content">
	<div>
		<div id="chartDiv2" style="width:1200px; height:400px;" />
	</div>
	</div>
	<br/>
<div id="footer" align="center" style="height: 30px; background-color:#335533;font-size: 1em;color:#fff;">2011 - Usage Sumary</div>
</body>
</html>